﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>选择用户示例</title>
    <link href="../CSS/queryPage.css" rel="stylesheet" type="text/css" />
    <link href="../CSS/popups.css" rel="stylesheet" type="text/css" />
    <link href="../CSS/jquery.datePicker.css" rel="Stylesheet" type="text/css" />
    <style type="text/css">
        a.dp-choose-date{ margin-top: 1px; }
    </style>

    <script src="../script/jquery.js" type="text/javascript"></script>
    <script src="../script/interface.fix.js" type="text/javascript"></script>
    <script src="../script/magic.js" type="text/javascript"></script>
    <script src="../script/selector.js" type="text/javascript"></script>
    <script type="text/javascript" src="../script/date.js"></script>
    <script type="text/javascript" src="../script/jquery.datepicker.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            //=======================================================
            // 选择用户
            // 需要的js文件（必须按照这个先后顺序引用）: jquery.js; interface.fix.js; magic.js; selector.js;
            // 需要的css文: popups.css; queryPage.css
            //=======================================================
            $("#cmdSelectUser").bind("click", function(){  
                var q = new query("User");
                q.fnPopup({
                    //弹出框的显示位置、大小、标题等设置。mode为s表示只能选择一条数据、为m表示可以选择多条数据（不管是否允许选择多条，返回值都是一个javascript数组对象）
                    top:10, left:50, width:400, height:250, mode: "s", title: "选择用户",
                    //传给选择框的参数值
                    //selected：一个数组，每个元素是一个JavaScript对象，有userId和fullName两个属性
                    //    用来传给弹出框当前已经选择的用户列表，这样弹出框显示时这些用户就是勾选状态
                    data: { selected: [{ userId: $("#txtUserId").val(), fullName: $("#txtUserName").val() }] },
                    //用户勾选了要选择的数据，点击确认按钮后执行下面这个函数
                    on_select: function(r) { 
                        if(r.length>0){ //如果有选择数据，则将返回的用户ID、用户姓名设置到相应的控件中
                            $("#txtUserId").val(r[0].userId);
                            $("#txtUserName").val(r[0].fullName);
                        }//if(r.length>0){
                        else{ //没有选择数据，清空相应控件的值
                            $("#txtUserId").val("");
                            $("#txtUserName").val("");
                        }
                    }//on_select
                });//q.fnPopup
            });//$("#cmdSelectUser").bind
            
            //选择产品
            $("#cmdSelectItem").bind("click", function(){  
                var q = new query("Item");
                q.fnPopup({
                    top:10, left:50, width:560, height:250, mode: "s", title: "选择产品",
                    data: { selected: [{ itemId: $("#txtItemId").val(), skuId: $("#txtSkuId").val(), itemCode: $("#txtItemCode").val(), itemName: $("#txtItemName").val(), colorCode: $("#txtColor").val(), sizeCode: $("#txtSize").val() }] },
                    on_select: function(r) { 
                        if(r.length>0){
                            $("#txtItemId").val(r[0].itemId);
                            $("#txtSkuId").val(r[0].skuId);
                            $("#txtItemCode").val(r[0].itemCode);
                            $("#txtItemName").val(r[0].itemName);
                            $("#txtColor").val(r[0].colorCode);
                            $("#txtSize").val(r[0].sizeCode);
                        }//if(r.length>0){
                        else{
                            $("#txtItemId").val("");
                            $("#txtSkuId").val("");
                            $("#txtItemCode").val("");
                            $("#txtItemName").val("");
                            $("#txtColor").val("");
                            $("#txtSize").val("");
                        }
                    }//on_select
                });//q.fnPopup
            });//$("#cmdSelectItem").bind
            
            //选择日期
            //=======================================================
            // 选择用户
            // 需要的js文件（必须按照这个先后顺序引用）: jquery.js; date.js; jquery.datepicker.js;
            // 需要的css文: jquery.datePicker.css，以及style节点里面的a.dp-choose-date
            //=======================================================
            $("#txtDate").datePicker({startDate: '2008-01-01'});
            
            //建立交接单时选择发货单
            $("#cmdSelectDeliver").bind("click", function(){  
                var q = new query("Deliver4IC");
                q.fnPopup({
                    top:10, left:50, width:560, height:250, mode: "m", title: "选择发货单",
                    data: { selected: [{ ordNum: $("#txtDlvNumber").val(), ordType: $("#txtDlvType").val() }] },
                    on_select: function(r) { 
                        //传入的参数mode: "m"表示允许多项选择，这个示例只取了第一个结果显示出来
                        alert(r.length);
                        if(r.length>0){
                            $("#txtDlvNumber").val(r[0].ordNum);
                            $("#txtDlvType").val(r[0].ordType);
                        }//if(r.length>0){
                        else{
                            $("#txtDlvNumber").val("");
                            $("#txtDlvType").val("");
                        }
                    }//on_select
                });//q.fnPopup
            });//$("#cmdSelectItem").bind
        });
        
            //选择产品
            $("#cmdSelectItem").bind("click", function(){  
                var q = new query("Item");
                q.fnPopup({
                    top:10, left:50, width:560, height:250, mode: "s", title: "选择产品",
                    data: { selected: [{ itemId: $("#txtItemId").val(), skuId: $("#txtSkuId").val(), itemCode: $("#txtItemCode").val(), itemName: $("#txtItemName").val(), colorCode: $("#txtColor").val(), sizeCode: $("#txtSize").val() }] },
                    on_select: function(r) { 
                        if(r.length>0){
                            $("#txtItemId").val(r[0].itemId);
                            $("#txtSkuId").val(r[0].skuId);
                            $("#txtItemCode").val(r[0].itemCode);
                            $("#txtItemName").val(r[0].itemName);
                            $("#txtColor").val(r[0].colorCode);
                            $("#txtSize").val(r[0].sizeCode);
                        }//if(r.length>0){
                        else{
                            $("#txtItemId").val("");
                            $("#txtSkuId").val("");
                            $("#txtItemCode").val("");
                            $("#txtItemName").val("");
                            $("#txtColor").val("");
                            $("#txtSize").val("");
                        }
                    }//on_select
                });//q.fnPopup
            });//$("#cmdSelectItem").bind
    </script>

</head>
<body>
<!--
    查看示例的方法（把示例文件放到站点的example目录里面）：
    1. 浏览器打开站点，进行登陆（没有登陆无法调用出选择用户的对话框）
    2. 地址中直接指定文件selectUser.htm打开，就可以了
-->
    <div style="height:20px; width:300px;">
        <span style="float:left;">选择用户</span>
        <input id="txtUserName" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;" />
        <input id="txtUserId" type="text" style="display:none;" />
        <div id="cmdSelectUser" style="float:left; background-image:url(../images/cuser.gif); background-position:center; background-repeat:no-repeat; width:20px;height:19px;margin-top:auto;margin-bottom:auto; cursor:pointer;border:0;"></div>
    </div>
    
<!--
    选择产品（SKU）
-->
    <div style="height:20px; width:650px; margin-top:15px;">
        <span style="float:left;">选择产品</span>
        <span style="float:left;">&nbsp;&nbsp;货号:&nbsp;</span>
        <input id="txtItemCode" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;width:80px;" />
        <span style="float:left;">&nbsp;&nbsp;名称:&nbsp;</span>
        <input id="txtItemName" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;width:180px;" />
        <span style="float:left;">&nbsp;&nbsp;颜色:&nbsp;</span>
        <input id="txtColor" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;width:50px;" />
        <span style="float:left;">&nbsp;&nbsp;尺码:&nbsp;</span>
        <input id="txtSize" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;width:70px;" />
        <input id="txtItemId" type="text" style="display:none;" />
        <input id="txtSkuId" type="text" style="display:none;" />
        <div id="cmdSelectItem" style="float:left; background-image:url(../images/b_search.png); background-position:center; background-repeat:no-repeat; width:20px;height:19px;margin-top:auto;margin-bottom:auto; cursor:pointer;border:0;"></div>
    </div>
    
<!--
    选择日期
-->
    <div style="height:20px; width:300px; margin-top:15px;">
        <span style="float:left;">选择日期:</span>
        <input id="txtDate" type="text" maxlength="10" readonly="readonly" class="readonly input" style="float:left;margin-right:4px;width:80px;" />
    </div>
    
<!--
    选择发货单
-->
    <div style="height:20px; width:300px; margin-top:15px;">
        <span style="float:left;">选择发货单:</span>
        <input id="txtDlvNumber" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;" />
        <input id="txtDlvType" type="text" style="display:none;" />
        <div id="cmdSelectDeliver" style="float:left; background-image:url(../images/b_search.png); background-position:center; background-repeat:no-repeat; width:20px;height:19px;margin-top:auto;margin-bottom:auto; cursor:pointer;border:0;"></div>
    </div>
    
<!--
    选择产品（SKU），确定到仓库
-->
    <div style="height:20px; width:650px; margin-top:15px;">
        <span style="float:left;">选择产品</span>
        <span style="float:left;">&nbsp;&nbsp;货号:&nbsp;</span>
        <input id="txtItemCode2" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;width:80px;" />
        <span style="float:left;">&nbsp;&nbsp;名称:&nbsp;</span>
        <input id="txtItemName2" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;width:180px;" />
        <span style="float:left;">&nbsp;&nbsp;颜色:&nbsp;</span>
        <input id="txtColor2" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;width:50px;" />
        <span style="float:left;">&nbsp;&nbsp;尺码:&nbsp;</span>
        <input id="txtSize2" type="text" maxlength="20" readonly="readonly" class="readonly input" style="float:left;margin-right:5px;width:70px;" />
        <input id="txtItemId2" type="text" style="display:none;" />
        <input id="txtSkuId2" type="text" style="display:none;" />
        <div id="cmdSelectItem2" style="float:left; background-image:url(../images/b_search.png); background-position:center; background-repeat:no-repeat; width:20px;height:19px;margin-top:auto;margin-bottom:auto; cursor:pointer;border:0;"></div>
    </div>
</body>
</html>
